<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>更改 HTML 元素的内容为属性值</title>
</head>

<body>
    <div id="change" class="change">
        <h1 data-text="Hello, Vue!" style="background-color: red">Hello, World!</h1>
    </div>

    <script>
        // step1. 获取目标元素
        let element = document.querySelector("#change > h1")
        console.log(element);
        
        // step2. 获取目标元素属性的值
        let attributeValue = element.getAttribute("data-text")
        console.log(attributeValue);
        
        //  step3. 更新元素的内容
        element.textContent = attributeValue

        // step4. 删除目标元素多余的属性
        element.removeAttribute("data-text")
    </script>
</body>

</html>